<template>
  <div class="z-home">
    <homeMenu
      @on-menu="menuClick"
      @set-active="setActive"
      :navAllList="navAllList"
      :navList="navList"
      :defaultActive="tagsActive"
    ></homeMenu>
    <div class="z-home-content">
      <!-- <homeMenu></homeMenu> -->
      <homeBar
        @clickTag="clickTag"
        @clickClose="clickClose"
        :tags="tags"
        :tagsActive="tagsActive"
        ref="bar"
      ></homeBar>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import homeMenu from "views/home/homeMenu.vue";
import homeBar from "views/home/homeBar.vue";
import { navList, navAllList } from "./menuFun.js";
import { tags, tagsActive, menuClick, clickTag, clickClose } from "./tagFun.js";

let router = useRouter();
// 先把首页加入
tags.push(navList[0]);
// 获取当前路由
let routerItem = router.currentRoute.value;
if (routerItem) {
  let path = routerItem.path;
  let item = navAllList.find((item) => {
    return item.path == path;
  });
  // router.push(item.path ? item.path : "/");
  tagsActive.value = item ? item.id : navList[0].id;
  if (item) {
    let index = tags.findIndex(($item) => item.id == $item.id);
    if (index == -1) tags.push(item);
  }
}
</script>

<style lang="scss">
.z-home {
  display: grid;
  grid-template-columns: 250px 1fr;
  .z-home-bar {
    // background: #001529;
    // justify-content: center;
    // display: grid;
    // display:flex;
    // align-items: center;
    width: calc(100vw - 300px);
    margin: 5px;
    .el-tag {
      margin-right: 10px;
    }
  }
  .z-home-content {
    display: grid;
    grid-template-rows: 50px 1fr;
  }
  .z-home-menu {
    background-color: #001529;
    height: 100vh;
  }
}
</style>
